<template>
  <div :id="id" />
</template>
<script>
import $ from 'jquery'
if (typeof window !== 'undefined') {
  var $s = require('scriptjs')
}

export default {
  name: 'EditorMD',
  model: {
    prop: 'content',
    event: 'content'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'editor'
    },
    id: {
      type: String,
      default: function() {
        return 'editor-md-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    editorPath: {
      type: String,
      default: `${process.env.VUE_APP_BASE_API}/editor.md`
    },
    editorConfig: {
      type: Object,
      default() {
        return {
          width: this.width,
          height: 530,
          path: `${process.env.VUE_APP_BASE_API}/editor.md/lib/`,
          saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
          searchReplace: true,
          htmlDecode: 'style,script,iframe|on*', // 开启 HTML 标签解析，为了安全性，默认不开启
          emoji: true,
          taskList: true,
          watch: true,
          toolbarAutoFixed: false,
          tocm: true, // Using [TOCM]
          tex: true, // 开启科学公式TeX语言支持，默认关闭
          flowChart: true, // 开启流程图支持，默认关闭
          sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
          dialogMaskBgColor: '#fff', // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
          imageUpload: false,
          imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
          imageUploadURL: `${process.env.VUE_APP_BASE_API}/admin/article/update1`,
          crossDomainUpload: true, // 开启跨越
          uploadCallbackURL: 'http://localhost:9528',
          onload: () => {
          },
          onchange: () => {
            if (this.instance) {
              this.$emit('content', this.instance.getMarkdown())
            } else {
              this.$emit('content', '')
            }
          }
        }
      }
    }
  },
  data() {
    return {
      instance: null
    }
  },
  watch: {
    content(val) {
      this.$nextTick(() =>
        this.$emit('content', val),
      $('.editormd-markdown-textarea').val(this.content)
      )
    }
  },
  mounted() {
    // 加载依赖
    $s([
      `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js`,
      `${this.editorPath}/lib/marked.min.js`,
      `${this.editorPath}/lib/prettify.min.js`,
      `${this.editorPath}/lib/raphael.min.js`,
      `${this.editorPath}/lib/underscore.min.js`
    ], () => {
      console.log('finish load js')
      $s(`${this.editorPath}/editormd.min.js`, () => {
        this.initEditor()
      })
    })
  },
  beforeDestroy() {
    if (this.instance) {
      this.instance.recreate()
    }
  },
  methods: {
    initEditor() {
      this.$nextTick((editorMD = window.editormd) => {
        if (editorMD) {
          if (this.type === 'editor') {
            this.instance = editorMD(this.id, this.editorConfig)
            if (this.content !== '') {
              $('.editormd-markdown-textarea').val(this.content)
            }
          } else {
            this.instance = editorMD.markdownToHTML(this.id, this.editorConfig)
            if (this.content !== '') {
              $('.editormd-markdown-textarea').val(this.content)
            }
          }
        }
      })
    }
  }
}
</script>
